<template>
  <el-row
    type="flex"
    align="middle"
    class="sec-li"
    :class="{ active: getCurrentPlayItem.id == data.id }"
  >
    <div class="tag" v-if="!$util.isEmpty(data.section_data)">
      {{ data.section_data.data_type_text }}
    </div>
    <div class="name" @click="handleClick">{{ data.title }}</div>
    <i class="edu-icon-zhibozhong paly" v-if="getCurrentPlayItem.id == data.id"></i>
    <i
      class=" edu-icon-suo lock"
      v-else-if="
        data.course_type == 1 &&
          data.course_lock == 1 &&
          data.lock == 1 &&
          !getSectionPlayLock.includes(data.id)
      "
    ></i>
    <template v-else>
      <!-- 已购买 -->
      <template v-if="data.is_buy == 1 && $util.isDef(data.section_rate)">
        <template v-if="data.section_rate.status == 999">
          <!-- 音视频已学习时长 -->
          <template v-if="$util.isDef(data.section_data)">
            <div
              class="status"
              v-if="data.section_data.data_type == 1 || data.section_data.data_type == 2"
            >
              <i class="edu-icon-historyrecord edu-icon--left"></i>
              {{ data.section_rate.current_time | formatSeconds }}
            </div>
          </template>
        </template>
        <!-- 已完成 -->
        <div class="status" v-else-if="data.section_rate.status == 992">
          <i class="el-icon-success"></i>
          {{ data.section_rate.status_text }}
        </div>
      </template>
    </template>
    <!-- 人脸验证 -->
    <EduFaceVerify
      v-if="faceVisible"
      :visible.sync="faceVisible"
      scene_key="course_section"
      :scene_id="faceData.id || 0"
      scene_type="1"
      @cancel="handleFace"
    ></EduFaceVerify>
  </el-row>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import eventVue from '../sectiobWatchEventVue.js'
import EduFaceVerify from '@/components/EduFaceVerify'
import Base64 from '@/utils/base64.js'
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      faceVisible: false,
      faceData: null
    }
  },
  components: {
    EduFaceVerify
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem,
      getSectionPlayLock: state => state.course.currentSectionPlayLock
    }),
    ...mapGetters({
      faceStatus: 'projectSetting/getGlobFaceStatus'
    })
  },
  methods: {
    async handleClick() {
      const item = this.data
      let pick = () => {
        // 是否需要人脸识别
        if (this.detailInfo.onhook_type == 3 && item.course_type == 1 && item.is_buy == 1) {
          eventVue.$emit('faceEntranceBybus')
          this.faceData = item
          this.faceEntrance()
        } else {
          this.jump(item)
        }
      }
      // 点播解锁模式
      if (item.course_type == 1 && item.course_lock == 1 && item.lock == 1) {
        let class_id = this.$route.params.id
        let lock = await this.$api.getCourseUnlock(
          {
            course_id: item.course_id,
            section_id: item.id,
            class_id: class_id
          },
          res => {
            return res.data
          },
          _ => {
            return false
          }
        )
        if (!lock) {
          this.$message.info('课时未解锁')
          return
        }
      }
      pick()
    },
    jump(item) {
      // 防止重复点击同一个课时
      if (item.id === this.getCurrentPlayItem.id) return
      const courseType = item.course_type // 课程类型
      if (courseType == 1) {
        const sectionType = item.section_data.data_type // 课时类型
        if (item.is_buy) {
          this.$store.commit('course/setCurrentPlayItem', {
            ...item
          })

          // 如果是音频视频可以播放或者试看
          if (sectionType == 1 || sectionType == 2) {
            this.toPathSection(`watch`, item.id)
            eventVue.$emit('sendSectionBybus')
          } else if (sectionType == 3 && Boolean(item.is_buy)) {
            eventVue.$emit('sendSectionBybus')
          } else if (sectionType == 4 && Boolean(item.is_buy)) {
            eventVue.$emit('sendSectionBybus')
          }
        } else if (item.audition > 0) {
          this.$store.commit('course/setCurrentPlayItem', {
            ...item
          })
          this.toPathSection(`watch`, item.id)
          eventVue.$emit('sendSectionBybus')
        }
      } else if (courseType == 2) {
        if (item.live_rate.status == 999 && item.is_buy) {
          if (item.live_provider === 2) {
            // 声网直播
            this.$api.getLiveAgoraRoomInfo(item.id, res => {
              const {
                data: { info }
              } = res
              let agoraName = {
                1: 'agora-big-class',
                2: 'agora-small-class',
                3: 'agora-one-to-one'
              }
              let agoraRoom = agoraName[info.course_live_type]
              this.$router.push({
                name: agoraRoom
              })
              this.$store.commit('course/setCurrentPlayItem', {
                ...item
              })
            })
          } else if (item.live_provider === 3) {
            this.$store.commit('course/setCurrentPlayItem', {
              ...item
            })
            // cc直播
            if (item.section_live.live_type === 2) {
              // 大班课
              this.$router.push({
                name: 'cc-big-class'
              })
            } else if (item.section_live.live_type === 3) {
              // 小班课
              let ccLive = item.section_live
              let user = this.userInfo
              let token = this.token
              let params = {
                userid: ccLive.cc_userid,
                roomid: ccLive.cc_room_id,
                password: ccLive.authtype === 0 ? `${token.ak}:${token.sk}` : '',
                username: user.nick_name,
                autoLogin: true,
                role: 'talker',
                template: 32
              }
              const url = `https://class.csslcloud.net/hdclass/#/talker?${this.params(params)}`
              this.$router.push({
                name: 'cc-live',
                query: {
                  view: Base64.encode(url)
                }
              })
            }
          }
        } else if (item.live_rate.status == 992) {
          if (this.$util.isDef(item.live_rate.callback_url) && item.is_buy) {
            this.$store.commit('course/setCurrentPlayItem', {
              ...item
            })
          }
        }
      }
    },
    handleFace() {
      this.jump(this.faceData)
    },
    // 窗口
    faceEntrance() {
      // 已认证
      if (this.faceStatus) {
        this.$messageBox
          .confirm('请进行人脸验证', {
            type: 'none',
            center: true,
            confirmButtonText: '去验证'
          })
          .then(() => {
            this.faceVisible = true
          })
          .catch(() => {})
      } else {
        this.$messageBox
          .confirm('未完成人脸认证，请先去认证', {
            type: 'none',
            center: true,
            confirmButtonText: '去认证'
          })
          .then(() => {
            this.$router.push({
              path: '/my/profile/face_verify',
              query: {
                back: 1
              }
            })
          })
          .catch(() => {})
      }
    },
    toPathSection(url, id) {
      this.$router.replace({
        path: `/course/${this.$route.params.id}/${url}`,
        query: {
          mid: id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sec-li {
  padding-left: 30px;
  padding-right: 10px;
  height: 50px;
  cursor: pointer;
  .tag {
    margin-right: 8px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    padding: 0 5px;
    height: 18px;
    line-height: 18px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 1);
  }
  .name {
    flex: 1;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    @include ellipsis();
  }
  &:hover {
    background-color: $text-color-import;
  }
  &.active {
    .tag {
      color: $text-color-import;
      @include edu-color-primary(background-color);
      @include edu-color-primary(border-color);
    }
    .name {
      @include edu-color-auxiliary;
    }
  }
  .status {
    color: #b7bac1;
    font-size: 12px;
  }
  .paly {
    font-size: 14px;
    @include edu-color-auxiliary;
  }
  .lock {
    color: #dcdfe6;
    font-size: 16px;
  }
}
</style>
